<template>
  <div
    class="largeScreen-box"
    v-loading="loadingScreen"
    element-loading-text="拼命加载中"
  >
    <iframe
      :src="url"
      width="100%"
      height="100%"
      frameborder="0"
      class="screenIframe"
      id="myIframe"
    ></iframe>
  </div>
</template>

<script>
import { getSsoToken } from '@/apis/Common.js'
import { getRealToken } from '@/utils/util.js'
export default {
  props: {
    list: {
      type: Object,
      default: {
        url: ''
      }
    }
  },
  data() {
    return {
      form: {
        index: this.index
      },
      url: '',
      ssoToken: '',
      loadingScreen: false
    }
  },
  watch: {
    form: {
      handler: function (n, o) {
        this.$emit('onChange', n)
      },
      immediate: true,
      deep: true
    },
    'list.param': 'fetchScreenUrl',
    'list.url': 'fetchScreenUrl'
  },
  mounted() {
    this.fetchScreenUrl()
  },
  methods: {
    async fetchScreenUrl() {
      this.url = ''
      this.loadingScreen = true
      var iframe = document.getElementById('myIframe')
      if (iframe?.contentWindow) {
        iframe.contentWindow.location.reload(true)
      }
      try {
        const res = await getSsoToken()
        if (res.code === 200) {
          this.ssoToken = res.msg
          let queryParams = ''
          let separator = ''
          let params = ''
          if (this.list.url?.length > 0) {
            separator = this.list.url.includes('?') ? '&' : '?'
            if (
              this.list.param?.length > 0 &&
              typeof this.list.param === 'string'
            ) {
              params = JSON.parse(this.list.param)
              queryParams = params
                .map((item) => `${item.param}=${item.value}`)
                .join('&')
              this.url = `${this.list.url}${separator}${queryParams}&ssoToken=${
                this.ssoToken
              }&token=${getRealToken().insightToken}&access_token=${getRealToken().insightToken}`
            } else {
              this.url = `${this.list.url}${separator}ssoToken=${
                this.ssoToken
              }&token=${getRealToken().insightToken}&access_token=${getRealToken().insightToken}`
            }
          } else {
            this.url = ''
          }

          console.log(this.url)
        }
      } finally {
        this.loadingScreen = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.largeScreen-box {
  // background: url(../../../assets//img/bg-type/type1.png) no-repeat 100% 100%;
  width: 100%;
  height: 100%;
}
</style>
